<template>
  <div>
    <h2>ICH LIEBE DICH</h2>
    <h2>{{ name2 }}</h2>
    <h2>{{ sex }}</h2>
    <h2>{{ age1 + 1 }}</h2>
    <button @click="addAge">addAge</button>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      age1: this.age,
    };
  },
  // 简单接收
  // props: ["name2", "sex", "age"],

  // 接受并规定数据类型
  // props: {
  //   name2: String,
  //   age: Number,
  //   sex: String,
  // },

  // 规定更多
  // default和required不同时出现
    props: {
    name2: {
      type: String,
      required: true,
    },
    age: {
      type: Number,
      default: 99,
    },
    sex: {
      type: String,
      default: "女",
    },
  },
  methods: {
    addAge() {
      this.age1++;
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 30px;
  text-align: center;
  background-image: -webkit-linear-gradient(
    left,
    #e9a5a5,
    #b8c1c0 10%,
    #65c0e0 20%,
    #aea2db 30%,
    #81c1d9 40%,
    #e9a5a5 50%,
    #b8c1c0 60%,
    #65c0e0 70%,
    #aea2db 80%,
    #81c1d9 90%,
    #e9a5a5
  );
  color: transparent;
  -webkit-background-clip: text;
  background-size: 50% 100%;
  animation: a 5s infinite linear;
}

@keyframes a {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
</style>